<template>
  <div class="feed">
    <div class="tabs border-1px" v-el:tab-wrapper>
      <ul v-el:li-list>
        <li class="tab" v-for="item in dataFeed" :class="{'selected': idx===$index}" track-by="$index"
            v-touch:tap.stop.prevent="initlist($index, item.lid, item.name)">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="tabsPlaceholder" v-el:ph></div>
    <div class="content" v-el:fcontent>
      <div class="loading" v-show="showLoading">
        <div class="loadCircle"></div>
      </div>
      <div class="list" v-if="!showLoading && !noNews">
        <div class="nitem border-1px" :class="getItemType(item)" v-for="item in newslist" track-by="$index"
             v-touch:tap.stop.prevent="go(item.wapurl)">
          <div class="ntitle">
            {{ item.title }}
          </div>
          <div class="npic-list">
            <div class="npic" v-for="image in getImages(item)">
              <img :src="image.u" alt="{{item.title}}">
            </div>
          </div>
          <div class="ninfo">
            <span>{{ item.media_name }}</span>
            <span class="icon_comment" v-show="item.comment_show"></span>
            <span v-show="item.comment_show">{{ item.comment_show }}</span>
          </div>
        </div>
        <div class="list-more" v-if="!isFirstLoading && !isLoadingMoreNo">
          <img src="http://n.sinaimg.cn/sports/sina_lotto/lotto/wap/i/loading.gif"/>加载中...
        </div>
      </div>
      <div class="no-list" v-if="!showLoading && noNews">
        {{ getNoNews }}
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import BScroll from 'better-scroll';

  export default {
    data() {
      return {
        dataFeed: window._dataFeed || [],
        scrollX: 0,
        idx: 0,
        newslist: [],
        isFirstLoading: false,
        isLoadingMore: false,
        isLoadingMoreNo: false,
        currentpage: 1,
        lid: '',
        name: '',
        noNews: false,
        showLoading: false,
        matchOffsetTop: 0
      };
    },
    computed: {
      getNoNews() {
        return '暂无' + this.name + '数据';
      }
    },
    created() {
      this.$nextTick(() => {
        this._ulWidth();
        this.$nextTick(() => {
          this._initScroll();
          this._beginMorePage();
          this.initlist(0, this.dataFeed[0].lid, this.dataFeed[0].name, true);
          this._fixedTabs();
        });
      });
    },
    methods: {
      _initScroll(){
        this.tabsScroll = new BScroll(this.$els.tabWrapper, {
          click: true,
          probeType: 3,
          scrollX: true,
          startX: 0,
          bounce: true
        });
        this.tabsScroll.on('scroll', (pos) => {
          this.scrollX = Math.abs(Math.round(pos.x));
        });
      },
      _beginMorePage() {
        var self = this;
        util.scrollEnd(function () {
          if (self.isFirstLoading) {
            return;
          }
          if (self.isLoadingMore) {
            return;
          }
          if (self.isLoadingMoreNo) {
            return;
          }
          self.currentpage = self.currentpage + 1;
          // console.log(currentpage);
          self.loadMorePage();
        }, true);
      },
      _ulWidth() {
        let lis = this.$els.liList.getElementsByClassName('tab');
        let w = 0;
        for (let i = 0, len = lis.length; i < len; i++) {
          w += lis[i].offsetWidth;
        }
        this.$els.liList.style.width = w + 'px';
      },
      _fixedTabs() {
        let self = this;
        let timeouttab = '';
        window.onScrollTab = function () {
          if (timeouttab) {
            window.clearTimeout(timeouttab);
          }
          timeouttab = setTimeout(function () {
            checkLoadTab();
          }, 50);
        }
        self.matchOffsetTop = $(self.$els.tabWrapper).offset().top;
        let checkLoadTab = function () {
          let vD = window.util.viewData();
          if (vD.scrollTop > self.matchOffsetTop) {
            $(self.$els.tabWrapper).addClass('match_tabs_fixed');
            $(self.$els.ph).show();
          } else {
            $(self.$els.tabWrapper).removeClass('match_tabs_fixed');
            $(self.$els.ph).hide();
          }
        }
      },
      loadFirstPage(flag) {
        var self = this;
        self.showLoading = true;
        self.currentpage = 1;
        self.isFirstLoading = true;
        $.ajax({
          url: 'http://feed.mix.sina.com.cn/api/roll/get?lid=' + self.lid + '&pageid=389&num=10&page=' + self.currentpage + '&fields=wapurl,title,media_name,images,comment_show',
          dataType: 'jsonp',
          data: {},
          cache: false,
          jsonpCallback: 'feed_lotto_' + self.lid + '_' + self.currentpage,
          type: 'get',
          success: function (res) {
            let result = res.result;
            let code = result.status.code;
            let data = result.data;
            let rlid = result.lid;
            if (self.lid == rlid) {
              self.showLoading = false;
              self.isFirstLoading = false;
              self.isLoadingMoreNo = false;
              if (code === 0 && data.length > 0) {
                self.noNews = false;
                self.newslist = data;
                self.$nextTick(() => {
                  $(self.$els.fcontent).css('minHeight', $(self.$els.fcontent).height() + 'px');
                  if (!flag){
                    window.scroll(0, self.matchOffsetTop);
                  }
                });
                if (data.length < 3) {
                  self.currentpage = self.currentpage + 1;
                  self.loadMorePage();
                }
              } else {
                self.noNews = true;
                self.isLoadingMoreNo = true;
              }
            }
          }
        });
      },
      loadMorePage() {
        var self = this;
        self.isLoadingMore = true;
        $.ajax({
          url: 'http://feed.mix.sina.com.cn/api/roll/get?lid=' + self.lid + '&pageid=389&num=10&page=' + self.currentpage + '&fields=wapurl,title,media_name,images,comment_show',
          dataType: 'jsonp',
          data: {},
          cache: false,
          jsonpCallback: 'feed_lotto_' + self.lid + '_' + self.currentpage,
          type: 'get',
          success: function (res) {
            let result = res.result;
            let code = result.status.code;
            let data = result.data;
            let rlid = result.lid;
            if (self.lid == rlid) {
              self.isLoadingMore = false;
              self.isLoadingMoreNo = false;
              if (code === 0 && data.length > 0) {
                for (var i = 0, len = data.length; i < len; i++) {
                  self.newslist.push(data[i]);
                }
              } else {
                self.isLoadingMoreNo = true;
              }
            }
          }
        });
      },
      initlist(index, lid, name, flag) {
        this.idx = index;
        this.lid = lid;
        this.name = name;
        this.loadFirstPage(flag);
        return;
      },
      go(url) {
        if (url) {
          window.location.href = url;
        }
      },
      getItemType(item) {
        let imgs = item.images;
        if (!imgs || imgs.length <= 0) {
          return '';
        }
        if (imgs.length < 3) {
          return 'nitem1';
        }
        if (imgs.length >= 3) {
          return 'nitem2';
        }
        return '';
      },
      getImages(item) {
        let imgs = item.images;
        if (!imgs || imgs.length <= 0) {
          return [];
        }
        if (imgs.length < 3) {
          return imgs.slice(0, 1);
        }
        if (imgs.length >= 3) {
          return imgs.slice(0, 3);
        }
        return [];
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .feed
    display: block
    .tabs
      height: 44px
      padding: 0 10px
      background: #ffffff
      overflow: hidden
      .tab
        float: left
        height: 44px
        line-height: 21px
        font-size: 15px
        color: #95989A
        padding: 12px 14px 0
        &.selected
          color: color1
          position: relative
          font-weight: 700
          &::before
            position: absolute
            left: 50%
            bottom: -1px
            bg-image('i/icon_tab_line')
            background-size: 25px 11px
            width: 25px
            height: 11px
            margin-left: -13px
            content: ' '
            display: block
      &::after
        display: none
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        height: 1px
        background: c_split
        content: ' '
      &.match_tabs_fixed
        position: fixed
        left: 0px
        right: 0px
        top: 0px
        z-index: 1000
        &::after
          display: block

    .tabsPlaceholder
      height: 44px
      display: none
    .content
      min-height: 260px
      position: relative
      .loading
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        z-index: 82
        .loadCircle
          position: absolute
          top: 50%
          left: 50%
          margin: -20px 0 0 -20px
          width: 40px
          height: 40px
          background: url(http://n.sinaimg.cn/sports/sina_lotto/lotto/wap/i/loading.png) no-repeat
          background-size: 40px 40px
          -webkit-animation: rotation 2s linear infinite
          animation: rotation 2s linear infinite
      .list
        padding-left: 8px
        .nitem
          height: 101px
          position: relative
          border-1px(c_split)
          position: relative
          .ntitle
            padding-top: 15px
            padding-right: 10px
            font-size: fs17
            color: color1
            line-height: 22px
            overflow: hidden
            height: 56px
          .npic-list
            display: none
          .ninfo
            margin-top: 12px
            height: 22px
            line-height: 22px
            font-size: 0
            color: #95989A
            span
              display: inline-block
              vertical-align: middle
              font-size: 11px
            .icon_comment
              bg-image('i/icon_comment')
              width: 17px
              height: 16px
              background-size: 17px 16px
              margin: 0 7px 0 17px
          &.nitem1
            height: 110px
            .ntitle
              padding-right: 125px
            .npic-list
              display: block
              position: absolute
              right: 8px
              top: 14px
              width: 104px
              height: 77px
              .npic
                display: block
                width: 100%
                height: 100%
                img
                  display: block
                  width: 100%
                  height: 100%
            .ninfo
              margin-top: 15px
          &.nitem2
            height: 195px
            .npic-list
              display: block
              display: flex
              justify-content: space-between
              .npic
                flex: 1;
                height: 96px
                padding: 17px 8px 4px 0
                img
                  display: block
                  width: 100%
                  height: 100%
        .list-more
          background: #fff
          margin-bottom: 5px
          line-height: 40px
          height: 40px
          font-size: 13px
          text-align: center
          color: c_icon
          img
            display: inline-block
            width: 15px
            height: 15px
            vertical-align: 10px
            margin-right: 10px
            vertical-align: baseline

      .no-list
        text-align: center
        line-height: 200px
        font-size: 15px
        color: c_icon
</style>